<!doctype html>
<html lang="en">
<head>
	<title>Grid - Editing</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="wijgrid provides editing" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />
	
	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css"/>
	<link href="../../themes/wijmo/jquery.wijmo-open.2.3.2.css" rel="stylesheet" type="text/css" />
	<link href="../../themes/wijmo/jquery.wijmo.wijgrid.css" rel="stylesheet" type="text/css" />

	<script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
	<script src="../../external/globalize.min.js" type="text/javascript"></script>
	<script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>

	<script src="../../external/jquery.wijmo-open.all.2.3.2.min.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijdatasource.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijgrid.js" type="text/javascript"></script>

	<script id="scriptInit" type="text/javascript">
		$(document).ready(function () {
			var $element = $("#demo").wijgrid(
			{
				allowEditing: true,
				allowKeyboardNavigation: true,
				highlightCurrentCell: true,
				showRowHeader: true,
				selectionMode: "none",
				afterCellUpdate: onAfterCellUpdate,
				invalidCellValue: onInvalidCellValue,
				afterCellEdit: onAfterCellEdit,
				columns: [
					{ /*readOnly: true*/ },
					{ dataType: "currency", valueRequired: true },
					{ dataType: "number" },
					{ dataType: "number", dataFormatString: "p0" },
					{ dataType: "boolean" }
				]
			});

			$("#log").html(dump($element.wijgrid("data"))); 
		});

		function onAfterCellUpdate(e, args) {
			$("#log").html(dump($("#demo").wijgrid("data")));
		}

		function onInvalidCellValue(e, args) {
			$(args.cell.container())
				//.removeClass("ui-state-active")
				.addClass("ui-state-error");
		}

		function onAfterCellEdit(e, args) {
			$(args.cell.container())
				//.addClass("ui-state-active")
				.removeClass("ui-state-error");
		}

		function dump(d2array) {
			
			var str = "<table class=\"ui-widget ui-widget-content\" rules=\"all\">";
			str += "<caption class=\"ui-widget-header\">dump</caption>";

			for (var i = 0, rowLen = d2array.length; i < rowLen; i++) {
				var row = d2array[i];
				str += "<tr>";

				for (var j = 0, cellLen = row.length; j < cellLen; j++) {
					str += "<td>" + row[j] + "</td>";
				}

				str + "</tr>";
			}

			return str + "</table>";
		}
	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>
				Editing</h2>
		</div>
		<div class="main demo">
			<!-- Begin demo markup -->

			<table id="demo">
				<thead>
					<tr>
						<th>ProductID</th><th>UnitPrice</th><th>Quantity</th><th>Discount</th><th>Discontinued</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>11</td><td>14</td><td>12</td><td>0</td><td>false</td>
					</tr><tr>
						<td>42</td><td>9.8</td><td>10</td><td>0</td><td>false</td>
					</tr><tr>
						<td>72</td><td>34.8</td><td>5</td><td>0</td><td>false</td>
					</tr><tr>
						<td>14</td><td>18.6</td><td>9</td><td>0</td><td>false</td>
					</tr><tr>
						<td>35</td><td>12.1</td><td>5</td><td>0.5</td><td>true</td>
					</tr>
				</tbody>
			</table>

			<div id="log">
			</div>
				
			<!-- End demo markup -->
			<div class="demo-options">
			<!-- Begin options markup -->
				
			<!-- End options markup -->
			</div>
		</div>
		<div class="footer demo-description">
			<p>
        This sample shows how you can edit the grid by enabling the <b>allowEditing</b> option. 
			</p>
		</div>
	</div>
</body>
</html>
